<template>
<div class="login-wrapper">
  <div class="img-div">
    <div class="logo-dom"
         :style="logo"></div>
  </div>
  <div class="mod-content">
    <group>
      <x-input required
               placeholder="手机号/用户名/邮箱"
               v-model="userName"></x-input>
      <x-input required
               placeholder="密码"
               type="password"
               v-model="password"></x-input>
    </group>
    <x-button type="primary" @click.native="logon" class="pass-form-item-submit">登录</x-button>         
  </div>
</div>

</template>

<script>
import { XInput, Group, XButton } from 'vux';
import logo from '../assets/logo.png';

export default {
  components: {
    XInput,
    Group,
    XButton
  },
  data() {
    return {
      logo: `background-image: url(${logo})`,
      userName: '',
      password: ''
    }
  },
  methods: {
    logon() {
      localStorage.user = JSON.stringify({ userName: 'admin' })
      this.$router.push({ path: '/drive' })
    }
  }
}

</script>

<style lang="less">
.img-div {
  text-align: center;
  margin: 0 auto;
  height: 80px;
  padding-top: 10px;
  .logo-dom {
    width: 185px;
    height: 60px;
    display: block;
    margin: 15px auto 0;
    background-size: 185px 60px;
  }
}

.mod-content {
  padding: 20px;
}

.pass-form-item-submit {
  margin-top: 20px;
  background-color: #367cff!important;
}
</style>
